<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 一般数据会通过props进行传递   模板标签会通过插槽进行传递 -->
    <div id="app">
        <!-- 没有内容就是没有插槽 -->
        <my-demo id="wh2101" :title="title"></my-demo>
        <!-- 111 => id="wh2101" 传递的为静态参数 -->
        <!-- 222 => :title="title" 传递的为动态的参数 -->
        <br>
        <!-- 有内容就是插槽  会替换插槽里面的默认内容 -->
        <my-demo>
            <!-- 匿名插槽 -->
            <div>
                <p>有插槽内容,就会替换默认的插槽内容</p>
                <p>可以继续插很多内容</p>
            </div>
            <br>
          
        </my-demo>
    </div>

    <template id="demo">
        <div>
            <h2>demo --- demo --- demo</h2>
            <p>组件 --- 插槽 --- slot</p>
            <hr>
            <!-- 444 => 在模板 对props接收的参数进行展示 -->
            <p>props --- {{id}} ---{{title}} </p>
            <hr>
            <!-- slot(匿名插槽) --- 先预置一个插槽  有传内容就显示传来的内容  没有就显示默认的内容 -->
            <div style="border:3px solid brown;padding: 20px;">
                <slot>这是匿名插槽的默认内容,如果没有父组件的内容分发 这里就显示默认的内容 - 匿名 </slot>
            </div>
          
        </div>
    </template>
</body>

<script>
    Vue.component("myDemo", {
        template: "#demo",
        props: ['id', 'title'] // 333 => 通过props 对参数进行接收
    })


    const vm = new Vue({
        data: {
            title: "组件 插槽"
        },
        mounted() {
            document.querySelectorAll("title")[0].innerHTML = this.title
        }

    }).$mount("#app")
</script>

</html>